<template>
  <div class="center">
    <el-tabs v-model="name" @tab-click="handleClick" >
    <el-tab-pane v-for="item in  tabData" :key="item.id"  :label="item.name" :name="item.id">
      <el-tabs v-model="pName"  type="border-card" @tab-click="childClick">
        <el-tab-pane v-for="item in  item.childList" :key="item.id"  :label="item.name" :name="item.id">
           <div class="tab-center" >
            <parser
            v-if="formConfChild.render"
              :is-edit="formConfChild.isEdit"
              :form-conf="formConfChild.content"
              :form-edit-data="formConfChild.currentEditData"
               @submit="handlerSubmit"
                />
           </div>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
import parser from '@/components/common/FormGenerator/components/parser/Parser'
import { configCategoryGet , getTreeFieldInfo , addFieldInfo} from '@/api/api'
export default {
    components: { parser },
    data(){
        return{
          tabData:[],
          childList:[],
          name:'',
          pName:'',
          formConfChild: { content: { fields: [] },currentEditData:{}, id: null, render: true, isEdit: true },
        }
    },
    mounted(){
       this.initConfigCategoryGet()
    },
    methods:{
     async initConfigCategoryGet(){
       const res = await  configCategoryGet({type:6})
       res.data.forEach((item,index)=>{
        if(item.childList.length){
          const filterArrer =  item.childList.filter(item=> item.fromId)
          if(filterArrer){
            item.childList = filterArrer
            this.tabData.push(item)
          }
        }
       })
       this.name = this.tabData[0].id
       this.pName = this.tabData[0].childList[0].id
       this.initGetTreeFieldInfo(res.data[0].childList[0].id)
      },
      async initGetTreeFieldInfo(id){
        const res = await getTreeFieldInfo(id)
        this.formConfChild.render = false
        this.formConfChild.id =  res.data.sysFormDO.id
        this.formConfChild.content = JSON.parse(res.data.sysFormDO.content)
        setTimeout(()=>{
          this.formConfChild.render = true
          this.$forceUpdate()
          this.funSysFormFieldInfoDo(res.data.sysFormFieldInfoDoList)
        })
      },
     async handlerSubmit(v){
      let data = []
      for(let key in v){
        let obj = {name:key,title:key,value:v[key]}
        data.push(obj)
      }
       const resData =  this.tabData.find(item => item.id == this.name)
       const childData = resData.childList.find(item => item.id == this.pName )
       const res = await addFieldInfo({formId:childData.fromId,fields:JSON.stringify(data)})
       if(res.code == 200){
         this.$message.success('提交成功!');
       }else{
        this.$message.error(res.message);
       }
      },
      funSysFormFieldInfoDo(v){
        if(!v) return
        let obj = {}  
        v.forEach(item=>{
          obj[item.name] =item.value
          })
          this.formConfChild.currentEditData = obj
      },
      handleClick(v){
        const data =   this.tabData.find(item => item.id == this.name)
        this.childList = data.childList
        this.pName = data.childList[0].id
        this.initGetTreeFieldInfo(data.childList[0].id)
      },
      childClick(v){
        this.initGetTreeFieldInfo(v.name)
      },
    }
}
</script>

<style>
.center{
    width: calc(100% - 40px);
    height: calc(100% - 30px);
    background-color: #fff;
    padding-top: 30px;
    padding:30px 20px 0 20px;
}
.tab-center{
  width:100%;
  height:65vh;
  overflow-y:auto;
}

</style>